<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layer/layer/mobile/need/layer.css}">
    <script th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/layer/layer/layer.js}"></script>
    <style>
        /* reset.css */
        body {
            font-size: 12px !important;
            font-family: 'Microsoft Yahei', 'proxima-nova', helvetica, arial;
            -webkit-overflow-scrolling: touch;
        }

        input {
            -webkit-appearance: none;
            resize: none;
        }
        section {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            padding: 0;
            margin: 0;
        }
        h5 {
            font-style: normal;
            font-weight: normal;
        }

        img {
            border: 0;
            display: block;
            border: 0;
        }

        .clearfix:after {
            content: '';
            display: block;
            visibility: hidden;
            height: 0;
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        a {
            text-decoration: none;
            color: #969696;
        }

        a:hover {
            color: #fed503;
            text-decoration: none;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            outline: none;
        }

        /* 去掉 input 右边上下箭头 */
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset !important;
        }

        /* 项目样式 */
        .process-status-new {
            width: 50%;
            background-color: #fff;
            height: 46px;
            padding-top: 24px;
            margin-left: 25%;
        }

        .process-status-new ul {
            margin: 0 36px;
            border-top: 1px solid #e5e5e5;
            height: 45px;
            position: relative;
        }

        .process-status-new ul li {
            position: absolute;
            float: left;
            width: 50%;
            top: -12px;
        }

        .process-status-new ul .p-gjj {
            left: 0;
        }

        .process-status-new ul .p-basic {
            left: 50%;
        }

        .process-status-new ul .p-edu {
            left: 100%;
        }

        /*.process-status-new ul .p-ok {*/
        /*    left: 100%;*/
        /*}*/

        /*.process-status-new .p-n-2 .p-basic span.l,*/
        /*.process-status-new .p-n-2 .p-gjj span.l,*/
        /*.process-status-new .p-n-3 .p-gjj span.l,*/
        /*.process-status-new .p-n-4 .p-gjj span.l */
        .jjjj {
            display: block !important;
        }

        .process-status-new ul li span.l {
            position: absolute;
            left: 0;
            top: 11px;
            width: 100%;
            z-index: 1;
            display: none;
            height: 1px;
            background-color: #439df8;
        }

        .process-status-new ul li .box {
            width: 88px;
            position: relative;
            margin-left: -44px;
            z-index: 2;
        }

        .process-status-new ul li .box .icon span {
            width: 17px;
            height: 17px;
            border: 2px solid #e5e5e5;
            display: block;
            border-radius: 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        /*.process-status-new .p-n-2 .p-basic .icon span,*/
        /*.process-status-new .p-n-2 .p-gjj .icon span,*/
        /*.process-status-new .p-n-3 .p-gjj .icon span,*/
        /*.process-status-new .p-n-4 .p-gjj .icon span */
        .jingdu1 {
            background-image: url(http://r.51gjj.com/image/static/20160518-bank-icon-cur2.png);
            background-size: 12px 12px;
            background-color: #ffffff;
            border: 2px solid #439df8 !important;
        }

        .process-status-new ul li .box .icon {
            width: 21px;
            height: 21px;
            padding: 1px;
            background-color: #fff;
            margin: 0 auto;
        }

        .process-status-new .p-n-2 .p-gjj p,
        .process-status-new .p-n-3 .p-gjj p,
        .process-status-new .p-n-4 .p-gjj p {
            color: #439df8;
        }

        .process-status-new ul li .box p {
            color: #b9b9b9;
            font-size: 12px;
            padding-top: 6px;
            line-height: 18px;
            text-align: center;
        }

    </style>
</head>
<body>
<div style="border: 1px solid grey;margin:70px;height: 500px">
    <h3 style="color: #1E9FFF;margin-left: 40%">八仙过海项目组出品</h3>
    <br>
    <div class="process-status-new">
        <ul class="p-n-2">
            <li class="p-gjj"> <span  class="l jjjj"></span>
                <div class="box">
                    <div class="icon"><span class="jingdu1"></span></div>
                    <p>注销步骤一</p>
                </div>
            </li>
            <li class="p-basic"> <span id="p-basic1"></span>
                <div class="box">
                    <div class="icon"><span id="p-basic2"></span></div>
                    <p>注销步骤二</p>
                </div>
            </li>
            <li class="p-edu">
                <div class="box">
                    <div class="icon"><span id="p-edu"></span></div>
                    <p>注销步骤三</p>
                </div>
            </li>
        </ul>
    </div>
    <br>
    <br>
    <h3 style="color: #1E9FFF;margin-left: 46%">卡片注销</h3>
    <br><br>
    <div id="tbody" class="text-center">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label  class="col-sm-4 control-label">卡号</label>
                <div class="col-sm-5">
                    <input type="number" class="form-control" id="cardnum"
                           placeholder="请输入卡号">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">证件号</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="identityId"
                           placeholder="请输入证件号">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">密码</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control" id="creditPwd"
                           placeholder="请输入密码">
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-4 control-label">电话号码</label>
                <div class="col-sm-5">
                    <input type="text" class="form-control" id="phonenumber"
                           placeholder="请输入电话号码">
                </div>
            </div>-->
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                    <button type="button" onclick="next2()" id="next1" class="btn-success btn btn-lg">下一步</button>
                </div>
            </div>
        </form>
        <br>
        <br>
    </div>
</div>

</body>
<script>
    //点击下一步页面跳转
    function next2() {

        var identityId=$("#identityId").val();
        var cardnum=$("#cardnum").val();
        var creditPwd=$("#creditPwd").val();
        //var phonenumber=$("#phonenumber").val();
        if(cardnum=="" || identityId==""||creditPwd==""){
            layer.msg("信息不能为空")
        }else {
            $.ajax({
                url: "/credit/tgs1",
                data: "cardnum=" + $("#cardnum").val() +
                    "&identityId=" + $("#identityId").val() + "&creditPwd=" + $("#creditPwd").val() +
                    "&type=" + 6,
                datatype: "html",
                type: "post",
                success: function (data) {
                    $("#tbody").html(data);
                    $("#p-basic2").attr("class", "jingdu1");
                    $("#p-basic1").attr("class", "jjjj l");
                },
                error: function () {
                    layer.msg("信用卡号与证件号不符或密码错误！！！");
                }
            })
        }
    }
    //正则验证身份证号
    $("#identityId").keyup(function () {
        var reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        var identityId=$("#identityId").val();
        if(!reg.test(identityId)){
            $("#identityId").css("border","1px solid red");
            $("#next1").attr("disabled",true);
        }else {
            $("#identityId").css("border","1px solid #ccc");
            $("#next1").attr("disabled",false);
        }
    })

    //正则验证信用卡号
    $("#cardnum").keyup(function () {
        var reg=/^([1-9]{1})(\d{14}|\d{18})$/;
        var cardnum=$("#cardnum").val();
        if(!reg.test(cardnum)){
            $("#cardnum").css("border","1px solid red");
            $("#next1").attr("disabled",true);
        }else {
            $("#cardnum").css("border","1px solid #ccc");
            $("#next1").attr("disabled",false);
        }
    })
    //正则验证电话号码
    // $("#phonenumber").keyup(function () {
    //     var reg=/^1[3456789]\d{9}$/;
    //     var phonenumber=$("#phonenumber").val();
    //     if(!reg.test(phonenumber)){
    //         $("#phonenumber").css("border","1px solid red");
    //         $("#next1").attr("disabled",true);
    //     }else {
    //         $("#phonenumber").css("border","1px solid #ccc");
    //         $("#next1").attr("disabled",false);
    //     }
    // })

</script>
</html>